<template>
	<div class="system-menu-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
			<el-form ref="menuDialogFormRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="80px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="菜单名称" prop="title">
							<el-input v-model="state.ruleForm.title" placeholder="名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="路由名称" prop="name">
							<el-input v-model="state.ruleForm.name" placeholder="路由中的 name 值" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="重定向" prop="redirect">
							<el-input v-model="state.ruleForm.redirect" placeholder="redirect 值=>格式：/system/user" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="路由组件" prop="component">
							<el-input v-model="state.ruleForm.component" placeholder="component值格式：system/user/index" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="组件路径" prop="path">
							<el-input v-model="state.ruleForm.path" placeholder="path值格式：/system" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="菜单排序">
							<el-input-number v-model="state.ruleForm.order" controls-position="right" placeholder="请输入排序" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否隐藏">
							<el-radio-group v-model="state.ruleForm.isHide">
								<el-radio :label="1">隐藏</el-radio>
								<el-radio :label="0">不隐藏</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="菜单图标">
							<IconSelector placeholder="请输入菜单图标" v-model="state.ruleForm.icon" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="systemMenuDialog">
import { storeToRefs } from 'pinia';
import { useMenuApi } from '/@/api/menu'
import { useRoutesList } from '/@/stores/routesList';
import { initBackEndControlRoutes } from "/@/router/backEnd";
import { ElMessageBox, ElMessage } from 'element-plus';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 引入组件
const IconSelector = defineAsyncComponent(() => import('/@/components/iconSelector/index.vue'));

// 定义变量内容
const menuDialogFormRef = ref();
const stores = useRoutesList();
const { routesList } = storeToRefs(stores);
const state = reactive({
	// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
	ruleForm: {
		id:'',
		parentId:'',
		title: '', // 菜单名称
		name:'',// 路由名称
		redirect:'',// 路由重定向
		component:'',// 路由component
		path:'',// 路由路径
		order:'',// 菜单排序
		icon: '', // 菜单图标
		isAffix:0, // 是否固定
		isHide: 0, // 是否隐藏
		isIframe: 0, 
		isKeepAlive: 0, // 是否缓存
	},
	rules: {
		title: { required: true, message: '请输入菜单名称', trigger: 'blur' },
		name: [{ required: true, message: '请输入路由名称', trigger: 'blur' }],
		redirect: [{ required: true, message: '请输入路由重定向', trigger: 'blur' }],
		component: [{ required: true, message: '请输入路由component', trigger: 'blur' }],
		path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
	},
	menuData: [], // 上级菜单数据
	dialog: {
		isShowDialog: false,
		title: '',
		submitTxt: '',
	},
});

// 获取 pinia 中的路由
const getMenuData = (routes) => {
	const arr = [];
	routes.map((val) => {
		val['title'] = val.meta?.title;
		arr.push({ ...val });
		if (val.children) getMenuData(val.children);
	});
	return arr;
};
// 打开弹窗
const openDialog = (data) => {
	state.dialog.title = '编辑菜单';
	state.dialog.submitTxt = '编 辑';
	state.dialog.isShowDialog = true;

	state.ruleForm.id = data.id
	state.ruleForm.parentId = data.parentId
	state.ruleForm.title = data.title
	state.ruleForm.name = data.name
	state.ruleForm.redirect = data.redirect
	state.ruleForm.component = data.component
	state.ruleForm.path = data.path
	state.ruleForm.order = data.order
	state.ruleForm.icon = data.icon
	state.ruleForm.isAffix = data.isAffix
	if(state.ruleForm.isHide == 0){
		state.ruleForm.isHide = 0
	}
	if(state.ruleForm.isHide != 0){
		state.ruleForm.isHide = 1
	}
	state.ruleForm.isIframe = data.isIframe
	state.ruleForm.isKeepAlive = data.isKeepAlive
};
// 关闭弹窗
const closeDialog = () => {
	menuDialogFormRef.value.resetFields();
	state.dialog.isShowDialog = false;
};
// 是否内嵌下拉改变
const onSelectIframeChange = () => {
	if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
	else state.ruleForm.isLink = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = () => {
	menuDialogFormRef.value.validate((valid) => {
		console.log(state.ruleForm)
		if(state.ruleForm.parentId === ""){
			ElMessage.error('获取不到上级菜单信息！');
				return false;
		}
		if (valid) {
			state.btnLoading = true
			const apiData = JSON.parse(JSON.stringify(state.ruleForm))
			useMenuApi().menuEdit(state.ruleForm).then(res => {
				state.btnLoading = false
				ElMessage.success('编辑成功!');
				closeDialog();
				emit('refresh');
				initBackEndControlRoutes() // 刷新菜单，未进行后端接口测试
			}).catch(() => {
				state.btnLoading = false
				closeDialog();
				emit('refresh');
			})
		}
	})
};
// 页面加载时
onMounted(() => {
	state.menuData = getMenuData(routesList.value);
});

// 暴露变量
defineExpose({
	openDialog,
});
</script>
